<template>
  <div class="outbound-form">
    <el-card class="box-card">
      <div slot="header">
        <span>基本信息</span>
      </div>

      <el-form :model="formData" :rules="rules" ref="form" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="出库单号" prop="orderNo" required>
              <el-input v-model="formData.orderNo" disabled placeholder="系统自动生成"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="出库主题" prop="subject" required>
              <el-input v-model="formData.subject" placeholder="请输入出库主题"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="出库类型" prop="type" required>
              <el-select v-model="formData.type" placeholder="请选择">
                <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="出库日期" prop="date" required>
              <el-date-picker v-model="formData.date" type="date" placeholder="请选择日期" style="width: 100%">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="出库申请人">
              <el-input v-model="formData.applicant" disabled placeholder="吴仕许"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所在部门">
              <el-input v-model="formData.department" disabled placeholder="生产部门"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="仓库名称" prop="warehouse" required>
              <el-select v-model="formData.warehouse" placeholder="请选择">
                <el-option v-for="item in warehouseOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="仓库管理员">
              <el-input v-model="formData.manager" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="出库人员" prop="operator" required>
              <el-input v-model="formData.operator" placeholder="请输入">
                <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所在部门">
              <el-input v-model="formData.operatorDept" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input type="textarea" :rows="4" placeholder="请输入备注" v-model="formData.remark">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-card class="form-container">
      <div class="operation-buttons">
        <el-button type="success" @click="handleAdd">添加</el-button>
        <el-button type="info" @click="handleBatchRemove">移除</el-button>
      </div>

      <el-table :data="tableData" stripe style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="index" label="序号" width="60">
        </el-table-column>
        <el-table-column label="操作" width="80">
          <template slot-scope="scope">
            <el-button type="text" style="color: #67C23A" @click="handleRemove(scope.$index)">移除</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="备件名称" width="120">
        </el-table-column>
        <el-table-column prop="spec" label="规格型号" width="120">
        </el-table-column>
        <el-table-column prop="type" label="备件类型" width="120">
        </el-table-column>
        <el-table-column prop="brand" label="品牌" width="100">
        </el-table-column>
        <el-table-column prop="unit" label="单位" width="80">
        </el-table-column>
        <el-table-column prop="stock" label="当前库存" width="100">
        </el-table-column>
        <el-table-column label="出库数量" width="120">
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.amount" :min="1" :max="scope.row.stock" size="mini"
              @change="handleAmountChange">
            </el-input-number>
          </template>
        </el-table-column>
        <el-table-column prop="location" label="存放位置" width="120">
        </el-table-column>
        <el-table-column prop="remark" label="备注" min-width="120">
        </el-table-column>
      </el-table>

      <div class="total-amount">
        出库总数量：<span class="amount">{{ totalAmount }}</span>
      </div>
    </el-card>

    <!--关联文件-->
    <div>
      <el-card class="box-card3aa">
        <div slot="header" class="clearfix">
          <span>关联文件</span>
        </div>
        <el-button-group style="margin-bottom: 20px;">
          <el-upload ref="upload2" action="http://localhost:9289/maintenance/upload2" :on-success="handleUploadSuccess2"
            :file-list="fileList" :auto-upload="true" :show-file-list="false" :before-upload="beforeUpload">
            <el-button>上传文档</el-button>
          </el-upload>
          <el-button @click="removeSelectedRows2" style="margin-left: 112px;
    margin-top: -36px;">移除</el-button>
        </el-button-group>
        <el-table :data="documents" style="width: 100%;" border @selection-change="handleSelectionChange2">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column type="index" label="序号" width="50"></el-table-column>
          <el-table-column prop="name" label="文件名"></el-table-column>
          <el-table-column prop="uploadDate" label="上传时间"></el-table-column>
          <el-table-column prop="uploader" label="上传者"></el-table-column>
          <el-table-column prop="size" label="文档大小"></el-table-column>
          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <el-button type="text" @click="removeRow3(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <div style="height: 120px;">
      <el-footer class="footer">
        <el-button @click="handleCancel" style="margin-top: 20px; margin-left: -140px;">关闭</el-button>
        <el-button type="primary" @click="handleConfirm" style="margin-top: 20px; margin-left: 20px;">确认</el-button>
      </el-footer>
    </div>
  </div>
</template>

<script>
export default {
  name: 'OutboundForm',
  data() {
    return {
      //关联文件上传
      documents: [],
      fileList: [],
      multipleSelection: [],
      tableData: Array.from({ length: 5 }, (_, index) => ({
        index: index + 1,
        name: '轴承',
        spec: '6204ZZ',
        type: '机械备件',
        brand: 'SKF',
        unit: '个',
        stock: 20,
        amount: 0,
        location: 'A3-03',
        remark: ''
      })),
      selectedRows: [],
      formData: {
        orderNo: '',
        subject: '',
        type: '',
        date: '',
        applicant: '吴仕许',
        department: '生产部门',
        warehouse: '',
        manager: '',
        operator: '',
        operatorDept: '',
        remark: ''
      },
      rules: {
        subject: [
          { required: true, message: '请输入出库主题', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择出库类型', trigger: 'change' }
        ],
        date: [
          { required: true, message: '请选择出库日期', trigger: 'change' }
        ],
        warehouse: [
          { required: true, message: '请选择仓库', trigger: 'change' }
        ],
        operator: [
          { required: true, message: '请选择出库人员', trigger: 'blur' }
        ]
      },
      typeOptions: [
        { value: 'normal', label: '正常出库' },
        { value: 'emergency', label: '紧急出库' },
        { value: 'return', label: '退货出库' }
      ],
      warehouseOptions: [
        { value: 'WH1', label: '仓库1' },
        { value: 'WH2', label: '仓库2' },
        { value: 'WH3', label: '仓库3' }
      ]
    }
  },
  computed: {
    totalAmount() {
      return this.tableData.reduce((sum, row) => sum + (Number(row.amount) || 0), 0)
    }
  },
  methods: {
    //关联文件上传
    beforeUpload(file) {
      const isLt10M = file.size / 1024 / 1024 < 10;

      if (!isLt10M) {
        this.$message.error("上传文件大小不能超过 10MB!");
      }
      return isLt10M;
    },
    removeRow3(index) {
      this.documents.splice(index, 1);
    },
    removeSelectedRows2() {
      this.documents = this.documents.filter(
        (item) => !this.multipleSelection.includes(item)
      );
    },
    handleSelectionChange2(val) {
      this.multipleSelection = val;
    },
    //文件上传成功时候
    handleUploadSuccess2(response, file, fileList) {
      this.documents.push({
        name: file.name,
        url: file.url,
        uploadDate: new Date().toLocaleDateString('zh').replaceAll('/', '-'),
        uploader: this.$store.state.user.name,
        size: file.size + " KB",
      });
      console.log("数据2", this.documents);
    },
    handleAdd() {
      this.$message.success('打开添加商品弹窗')
    },
    handleRemove(index) {
      this.$confirm('确认移除该商品?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableData.splice(index, 1)
        this.$message.success('移除成功')
      }).catch(() => { })
    },
    handleBatchRemove() {
      if (this.selectedRows.length === 0) {
        return this.$message.warning('请选择要移除的商品')
      }
      this.$confirm(`确认移除选中的 ${this.selectedRows.length} 个商品?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const ids = this.selectedRows.map(row => row.index)
        this.tableData = this.tableData.filter(row => !ids.includes(row.index))
        this.$message.success('批量移除成功')
      }).catch(() => { })
    },
    handleSelectionChange(val) {
      this.selectedRows = val
    },
    handleAmountChange() {
      // 数量变化时可以进行一些验证或计算
    },
    handleSearch() {
      this.$message.info('打开人员选择弹窗')
    }
  }
}
</script>

<style scoped>
.box-card3aa {
  /* width: 1210px; */
  /* margin-left: 10px; */
  margin-top: 20px;
}

.fixed-footer-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.footer {
  text-align: center;
  background-color: #eeeded;
  position: fixed;
  bottom: 0;
  z-index: 1;
  width: 100%;
}

.form-container {
  margin-top: 20px;
}

.outbound-detail {
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
}

.operation-buttons {
  margin-bottom: 20px;
}

.total-amount {
  margin-top: 20px;
  text-align: right;
  font-size: 14px;
  padding-right: 20px;
}

.amount {
  color: #F56C6C;
  font-weight: bold;
}

.el-input-number--mini {
  width: 100%;
}

.el-table .cell {
  padding-left: 10px;
  padding-right: 10px;
}

.el-input--mini {
  font-size: 12px;
}

.outbound-form {
  padding: 20px;
}

.box-card {
  margin-bottom: 20px;
}

.el-select {
  width: 100%;
}

.el-textarea__inner {
  font-family: inherit;
}

.required-label::before {
  content: '*';
  color: #F56C6C;
  margin-right: 4px;
}
</style>
